<template>
    <div>
      <nav-header ref="navHeader"></nav-header>
      <nav-bread>
        <span>Goods</span>
      </nav-bread>
      <div class="accessory-result-page accessory-page">
        <div class="container">
          <div class="filter-nav">
            <span class="sortby">Sort by:</span>
            <a href="javascript:void(0)" class="default cur">Default</a>
            <a href="javascript:void(0)" class="price" @click="changeSort">
              Price
              <i :class="{'el-icon-top':sortDesc, 'el-icon-bottom':!sortDesc}"></i>
            </a>
            <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterBy">Filter by</a>
          </div>
          <div class="accessory-result">
            <!-- filter -->
            <div class="filter stopPop" id="filter" :class="{'filterby-show': filterByShow}">
              <dl class="filter-price">
                <dt>Price:</dt>
                <dd><a href="javascript:void(0)" :class="{'cur': selectedPrice == 'all'}" @click="setFilterPrice('all')">All</a></dd>
                <dd v-for="(item, index) of priceFilter" :key="index" @click="setFilterPrice(index)">
                  <a href="javascript:void(0)" :class="{'cur': selectedPrice == index}">{{item.startPrice}} - {{item.endPrice}}</a>
                </dd>
              </dl>
            </div>

            <!-- search result accessories list -->
            <div class="accessory-list-wrap">
              <div class="accessory-list col-4">
                <ul>
                  <li v-for="(item, index) of goodsList" :key="index">
                    <div class="pic">
                      <a href="#"><img v-lazy="'/static/'+item.productImage" alt=""></a>
                    </div>
                    <div class="main">
                      <div class="name">{{item.productName}}</div>
                      <div class="price">{{item.salePrice | currency('￥')}}</div>
                      <div class="btn-area">
                        <a href="javascript:;" class="btn btn--m" @click="addCart(item.productId)">加入购物车</a>
                      </div>
                    </div>
                  </li>
                </ul>
                <div class="load-more" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="30">
                  <img src="./../assets/loading-spinning-bubbles.svg" alt="Loading icon" v-show="loading" />
                </div>
              </div>
            </div>
            <el-dialog
              title="加入购物车"
              :visible.sync="dialogVisible"
              width="30%"
              center>
              <span class="dialog-info">
                <i :class="{
                  'el-icon-circle-check green-icon':addSuccess,
                  'el-icon-circle-close red-icon':!addSuccess,
                  }"></i>
                &nbsp;{{addCartMsg}}
              </span>
              <span slot="footer" class="dialog-footer">
                <div v-if="!addSuccess">
                  <el-button type="primary" @click="goLogin">立即登陆</el-button>
                </div>
                <div v-else>
                  <el-button @click="dialogVisible = false">继续添加</el-button>
                  <el-button type="primary" @click="goCart">前往购物车</el-button>              
                </div>
              </span>
            </el-dialog>
          </div>
        </div>
        <div class="md-overlay" v-show="overLayFlag" @click="closeFilter"></div>
      </div>
      <nav-footer></nav-footer>
    </div>
</template>
<script>
  import './../assets/css/base.css'
  import './../assets/css/product.css'
  import NavHeader from '@/components/NavHeader.vue'
  import NavFooter from '@/components/NavFooter.vue'
  import NavBread from '@/components/NavBread.vue'
  import axios from 'axios'
  export default{
      data () {
          return {
            goodsList: [], // 商品数据集合
            priceFilter: [
              {
                startPrice: 0,
                endPrice: 500,
              },
              {
                startPrice: 500,
                endPrice: 1000,
              },
              {
                startPrice: 1000,
                endPrice: 2000,
              },
              {
                startPrice: 2000,
                endPrice: 5000,
              },
            ], // 价格区间
            page: 1, // 页数，默认1
            pageSize: 8, // 每页记录数，默认8
            selectedPrice: 'all', // 选中价格的标识，默认all
            filterByShow: false, // 价格选择显示与否
            overLayFlag: false, // 遮罩层显示与否
            sortDesc: true, // 默认升序
            busy: true, // infiniteScroll插件参数
            loading: false, // 懒加载图标显示
            addCartMsg: '', // 加入购物车接口，返回信息
            dialogVisible: false, // 弹窗是否显示
            addSuccess: false, // 加入购物车是否成功
          }
      },
      components: {
        NavHeader,
        NavFooter,
        NavBread
      },
      mounted () {
        this.getGoodsList()
      },
      methods: {
        getGoodsList (flag) {
          let param = {
            page: this.page,
            pageSize: this.pageSize,
            sort: this.sortDesc? 1 : -1,
          }
          if (this.priceFilter[this.selectedPrice]) {
            param.startPrice = this.priceFilter[this.selectedPrice].startPrice
            param.endPrice = this.priceFilter[this.selectedPrice].endPrice
          }
          this.loading = true
          axios.get('/goods/list',{
            params: param
          }).then(res => {
            let result = res.data
            if (result.status == 0) {
              if (flag){
                this.goodsList = this.goodsList.concat(result.result.list)
                if (result.result.count < 8) {
                  this.busy = true
                } else {
                  this.busy = false
                }
              } else {
                this.goodsList = result.result.list
                this.busy = false
              }
            } else {
              this.goodsList = []
            }
            this.loading = false
          })
        },
        showFilterBy () {
          this.filterByShow = true // 价格选择显示与否
          this.overLayFlag = true // 价格选择显示与否
        },
        closeFilter () {
          this.filterByShow = false
          this.overLayFlag = false
        },
        setFilterPrice (priceFilter) {
          this.page = 1
          this.selectedPrice = priceFilter
          this.closeFilter()
          this.getGoodsList()
        },
        changeSort () {
          this.sortDesc = !this.sortDesc
          this.page = 1
          this.getGoodsList()
        },
        loadMore () {
          this.busy = true
          setTimeout(() => {
            this.page++
            this.getGoodsList(true)
          }, 500)
        },
        addCart (productId) {
          axios.post('/goods/addCart',{productId}).then(res => {
            if (res.data.status == '0') {
              this.addSuccess = true
              this.$store.commit("updateCartCount", 1)
            } else {
              this.addSuccess = false
            }
            this.addCartMsg = res.data.msg
            this.dialogVisible = true
          })
        },
        goCart () {
          this.dialogVisible = false
          this.$router.push({name:'Cart'})
        },
        goLogin () {
          this.dialogVisible = false
          this.$refs['navHeader'].loginDialogShow = true
        }
      }
  }
</script>
<style scoped>
  .load-more{
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .dialog-info{
    font-size: 16px;
  }
  .red-icon{
    color: red;
  }
  .green-icon{
    color: green;
  }
</style>